<template>
  <div>
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="yyformsearch" class="demo-form-inline">
          <el-form-item label>
            <el-select v-model="yyformsearch.region" placeholder="搜索类型">
              <el-option label="菜品消耗" value="dishes"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择排行">
            <div class="block">
              <span class="demonstration"></span>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div v-if="this.yyformsearch.region=='dishes'">
        <router-view name="yydishes"></router-view>
    </div>
    <div v-if="this.yyformsearch.region=='member'">
        <router-view name="yymember"></router-view>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "yySet",
  data() {
    return {
      yyformsearch: {
        startTime: "",
        endTime: "",
        region: "dishes"
      },
      serchTime: "",
      formDataStatus: "",
    };
  },
  methods: {
    ...mapActions(["getyinyeData"]),
    yunyingsearch() {
      //修改获取到时间的格式
      // console.log(this.yyformsearch);
      this.yyformsearch.startTime = new Date(this.serchTime[0]).toLocaleDateString().replace(/\//g, "-");
      this.yyformsearch.endTime = new Date(this.serchTime[1]).toLocaleDateString().replace(/\//g, "-");
      this.getyinyeData(this.yyformsearch).then(res => {
        if (res === 200) {
          this.formDataStatus = 200;
        }
      });
    },
  },
  // created(){
  //     this.getyinyeData()
  // },
  mounted(){
    this.yunyingsearch()
    // this.getyinyeData(this.yyformsearch)
  }
};
</script>

<style scoped>
.operate-container {
  margin: 15px 0;
}
.el-input {
  width: 300px;
}
.block {
  margin-left: 50%;
}
a{
    text-decoration: none;
    color: #FFF;
}
</style>